<!-- 底部 版权 -->
<template>
  <div class="b-opr-box">
    <div class="b-opr-select">
      <el-checkbox :indeterminate="isIndeterminate" :value="checkAllFlag" @change="handleAllCheck" />
    </div>
    <div class="b-opr-btn" v-if="readbtn">
      <el-button type="primary" size="small" plain @click="$emit('batchRead')">批量读</el-button>
    </div>
    <div class="b-opr-btn">
      <el-button type="danger" size="small" plain @click="$emit('batchDel')">批量删</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'batch-opr',
  props: {
    indeterminateFlag: {
      type: Boolean,
      default: false
    },
    checkAll: {
      type: Boolean,
      default: false
    },
    readFlag: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      readbtn: this.readFlag | false,
      checkAllFlag: this.checkAll,
      isIndeterminate: this.indeterminateFlag
    }
  },
  watch: {
    indeterminateFlag: {
      handler(newValue, _oldValue) {
        this.isIndeterminate = newValue
      }
    },
    checkAll: {
      handler(newValue, _oldValue) {
        this.checkAllFlag = newValue
      }
    }
  },
  methods: {
    handleAllCheck() {
      this.checkAllFlag = !this.checkAllFlag
      this.$emit('handleAllCheck')
    }
  },
}
</script>

<style scoped>
.b-opr-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 5px 0px 10px 0px;
  padding: 0px 5px;

  .b-opr-select {
    width: 40px;
  }

  .b-opr-btn {
    width: 100px;
  }
}
</style>
